import { useState, useCallback } from "react";
import Taro from '@tarojs/taro';
import { Image, Text, View } from "@tarojs/components";
import i18n from "i18n-js";
import { GStyleSheet } from "@/utils/DarkMode";
import MenuBackdrop from '@/components/MenuBackdrop'
import moreIcon from '@/assets/images/home_icon_more.png';
import deleteIcon from '@/assets/images/home_icon_delete.png';


const dstyle = GStyleSheet.create({
  container: {
    boxSizing: 'border-box',
    padding: 10,
    paddingBottom: 5,
    justifyContent: 'flex-end',
  },
  menuIcon: {
    width: 25,
    height: 25,
    marginRight: 10,
  }
});


const MenuBar = () => {

  const styles = dstyle.useDynamicStyle();

  const [menuShow, setMenuShow] = useState(false);

  const showMenu = useCallback(() => {
    setMenuShow(true);
  }, []);

  const closeMenu = useCallback(() => {
    setMenuShow(false);
  }, []);

  const goToDeleteDevicePage = useCallback(() => {
    closeMenu();
    Taro.navigateTo({ url: `/pages/deleteDevice/index` });
  }, [closeMenu])

  return (
    <View style={styles.container} className='centerFlex'>
      <MenuBackdrop data={[{ icon: deleteIcon, title: i18n.t('DELETE_DEVICE'), onClick: goToDeleteDevicePage }]} visible={menuShow} onClose={closeMenu} >
      <Image src={moreIcon} style={styles.menuIcon} onClick={showMenu} />
      </MenuBackdrop>
      {/* <View className='config'>
        <Backdrop open={menuShow} onClose={closeMenu} closeable >
          <View className='at-modal__container'>
            <Image style={{ position: 'absolute', width: 18, height: 12, top: -12, right: 10 }} src={triangleIcon} />
            <View className='configItem' onClick={goToDeleteDevicePage}>
              <Image src={deleteIcon} className='configItemIcon' />
              <Text className='configItemName'>{i18n.t('DELETE_DEVICE')}</Text>
            </View>
          </View>
        </Backdrop>
      </View> */}
    </View>
  );
};

export default MenuBar;
